<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>Video/Audio Player</title>
		<link rel="stylesheet" href="img/iconfont.css" />
		<link rel="stylesheet" href="img/base.css" />
		<script type="text/javascript" src="http://jscore.secretcastle.cn/require.js"></script>
		<script type="text/javascript" src="http://jscore.secretcastle.cn/zepto.min.js"></script>
	</head>
	<body>
		<div class="wrapper">
			<!--Head img/video Area-->
			<div id="headImg">
				<div class="coverPanel">
					<span class="centerImg" id ="centerImg"><img /></span>
				</div>
			</div>
			
			<!--Bottom duration/controller Area-->
			<div id="controlPanel">
				<div class="durationArea">
					<audio id = "music" class="music"></audio>
					<progress value="" max="100" id = "durationProgress"></progress>
					<span class="small-font timeLine">00:00</span>
				</div>
				<div class="controller">
					<span class="btn iconfont icon-yinle" id = "muiscmenu"></span>
					<span class="btn iconfont icon-yuleshangyishou" id = "prev"></span>
					<span class="btn iconfont icon-yulebofang" id = "playstop"></span>
					<span class="btn iconfont icon-xiayishou1" id = "next"></span>
					<span class="btn iconfont icon-23kechengbofangshengyin" id = "volume"></span>
				</div>

				<!--hide area-->
				<div id="music_list" class="">
					<div class="close iconfont icon-chahao"></div>
					<ul class="ulList"></ul>
				</div>
			</div>
		</div>
		<!--loading Area-->
		<div class="loadingArea" style="display:none;">
			<div class="spinner">
			  <div class="cube1"></div>
			  <div class="cube2"></div>
			</div>
		</div>

	</body>
	<script type="text/javascript" src="js/base.js" ></script>
</html>
